<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-row :gutter="20">
            <el-col :span="12" style="text-align: right;float:right">
              <table-tools
                :drawerSearch="drawerVisible"
                @searchchange="searchChange"
                @refreshclick="refreshClick">
              </table-tools>
            </el-col>
          </el-row>
          <!-- 列表区域 -->
          <el-table
            v-loading="loading"
            ref="table"
            :data="deptList"
            highlight-current-row
            :row-class-name="rouClassNameFn"
            @current-change="handleCurrentChange"
            border
            stripe
            height="75vh"
            style="width: 100%">
            <el-table-column
              type="index"
              width="60">
              <template v-slot="scope">
                <el-radio v-model="selectChk" :label="scope.$index+1"></el-radio>
              </template>
            </el-table-column>
            <!-- <el-table-column type="index" label="序号"></el-table-column> -->
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="leader" label="负责人"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8" style="display: flex; align-items: center; justify-content: center;">
          <el-card style="width: 680px;height: 450px;margin-top: 45px; box-shadow: none !important;">
            <div slot="header" class="clearfix" style="display: flex;justify-content: space-between;">
              <span>新增/修改</span>
              <div class="opatar">
                <el-button v-permission="permission.add" icon="el-icon-plus" type="primary" @click="addFormDept" >新增</el-button>
                <el-button type="success" v-permission="permission.edit" icon="el-icon-edit" @click="editFormDept" :disabled="handleCurrentRows.length !== 1" >修改</el-button>
                <el-button v-permission="permission.del" icon="el-icon-delete" type="danger" @click="delFormDept" :disabled="handleCurrentRows.length !== 1">删除</el-button>
              </div>
            </div>
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
              <el-form-item label="部门名称" prop="name">
                <el-input placeholder="请输入" v-model="addForm.name"></el-input>
              </el-form-item>
              <el-form-item label="负责人" prop="leader">
                <el-input placeholder="请输入" v-model="addForm.leader"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input placeholder="请输入" v-model="addForm.remark"></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import tableTools from '@/components/tableToolsComponents' // tabs工具栏组件
export default {
  name: 'Depts',
  components: {
    tableTools
  },
  created() {
    this.getDeptList() // 获取部门列表
  },
  data() {
    return {
      // 指令权限
      permission: {
        add: ['admin', 'dept::add'],
        edit: ['admin', 'dept::edit'],
        del: ['admin', 'dept::delete'],
        list: ['admin', 'dept::list']
      },
      handleCurrentRows: [], // 当前单选中的行
      drawerVisible: false, // 搜索栏显示状态
      loading: false, // 表格刷新loading状态
      addDialogVisible: false,
      deptList: [], // 部门列表
      addForm: {}, // 表单对象
      addFormRules: {}, // 表单对象规则
      options: [
        { value: 'zhinan', label: '指南' },
        { value: 'zhinan1', label: '指南1' },
        { value: 'zhinan2', label: '指南2' }
      ],
      deptId: 0,
      selectChk: 0 // radio 选中状态
    }
  },
  methods: {
    async getDeptList() {
      this.loading = true
      const { data: res } = await this.$http.get('depts/list')
      this.loading = false
      if (res.meta.status !== 200) return this.$message.error(res.meta.message)
      this.deptList = res.data
    },
    handleCurrentChange(val) {
      if (!!val && val instanceof Object) {
        this.deptId = val.id
        this.handleCurrentRows = [val]
        this.selectChk = val.index + 1
        this.addForm = JSON.parse(JSON.stringify(val)) // 表单对象从列表获取后进行深拷贝
      }
    },
    cascaderPanelChange(val) {
      console.log(val)
    },
    async addFormDept() { // 新增部门
      // 新增表单参数
      const addDeptInfo = {
        name: this.addForm.name,
        leader: this.addForm.leader,
        remark: this.addForm.remark
      }
      const { data: res } = await this.$http.post('depts/add', addDeptInfo)
      if (res.meta.status !== 200) return this.$message.error(res.meta.message)
      this.$message.success('新增成功!')
      this.getDeptList()
      this.refreshClick()
    },
    async editFormDept() {
      const editdeptInfo = {
        id: this.addForm.id,
        name: this.addForm.name,
        leader: this.addForm.leader,
        remark: this.addForm.remark
      }
      const { data: res } = await this.$http.post('depts/edit', editdeptInfo)
      if (res.meta.status !== 200) return this.$message.error(res.meta.message)
      this.$message.success('更新成功!')
      this.update() // 无状态刷新列表
    },
    update() {
      // 列表无刷新更新
      this.$http.get('depts/list').then(res => {
        const deptrows = res.data.data.filter(item => {
          if (item.id === this.deptId) {
            return item
          }
        })
        for (let i = 0; i < this.deptList.length; i++) {
          if (this.deptList[i].id === deptrows[0].id) {
            this.deptList.splice(i, 1, deptrows[0])
          }
        }
      })
    },
    async delFormDept() {
      if (this.addForm.id === undefined || this.addForm.id === null) {
        return this.$message.error('请先选择您要删除的部门!')
      }
      const confirmresult = await this.$confirm('确定删除当前部门吗? 此操作不可恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (confirmresult !== 'confirm') {
        return this.$message.info('部门取消删除')
      }
      const { data: res } = await this.$http.delete('depts/' + this.addForm.id)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.message)
      }
      this.$message.success('部门删除成功')
      // 刷新数据列表
      this.getDeptList()
    },
    rouClassNameFn({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    // 工具栏搜索按钮触发回调
    searchChange(val) {
      this.drawerVisible = val
    },
    // 工具栏刷新按钮触发回调
    refreshClick() {
      this.handleCurrentRows = []
      this.selectChk = 0
      this.addForm = {}
      this.getDeptList()
    }
  }
}
</script>

<style lang="less" scoped>
.formBox {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.opatar {
  display: flex;
  justify-content: center;
}
</style>
